<template>
  <div class="header-container">
    <el-row type="flex" justify="space-between">
      <el-col :span="15">
        <el-row type="flex" justify="start" class="title">
          <img src="@/assets/images/login/logo2.png" />
          <span>建筑室内环境健康性能监测与预警系统</span>
        </el-row>
      </el-col>
      <el-col :span="9" class="user-info">
        <el-dropdown style="height: 48px" @command="handleClick">
          <span>{{ userInfo.name }}</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
              <el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
              <el-dropdown-item command="secretKey">密钥对列表</el-dropdown-item>
              <el-dropdown-item command="uploadImg">上传首页图片</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <span>&nbsp;|&nbsp;</span>
        <span class="out-act" @click="logout">退出</span>
      </el-col>
    </el-row>
    <user-info :showDialog="userInfoDialog" @editUserInfoDialogFun="editUserInfoDialogFun"></user-info>
    <edit-password :showDialog="editPasseordDialog" @editPasswordDialogFun="editPasswordDialogFun"></edit-password>
    <carousel-manage :showDialog="carouselDialog" @carouselDialogFun="carouselDialogFun"></carousel-manage>
    <secret-key :showDialog="secretKeyDialog" @secretKeyDialogFun="secretKeyDialogFun"></secret-key>
  </div>
</template>

<script>
import EditPassword from "../views/person/resetPwd";
import UserInfo from "@/views/person/index";
import CarouselManage from "@/views/carouselManage/index";
import SecretKey from "@/views/person/secretKey";
export default {
  name: "Header",
  components: {
    EditPassword,
    UserInfo,
    CarouselManage,
    SecretKey
  },
  data() {
    return {
      userInfo: {},
      editPasseordDialog: false,
      userInfoDialog: false,
      carouselDialog: false,
      secretKeyDialog: false
    };
  },
  mounted() {
    this.userInfo = this.$store.state.user.userInfo;
  },
  methods: {
    handleClick(e) {
      if (e == "userInfo") {
        this.userInfoDialog = true;
      } else if (e == "editPassword") {
        this.editPasseordDialog = true;
      } else if (e == "uploadImg") {
        this.carouselDialog = true;
      } else if (e == "secretKey") {
        this.secretKeyDialog = true;
      }
    },
    logout() {
      this.$store.dispatch("user/logoutAct");
      this.$router.replace("/login");
    },
    editPasswordDialogFun(e) {
      this.editPasseordDialog = e;
    },
    editUserInfoDialogFun(e) {
      this.userInfoDialog = e;
    },
    carouselDialogFun(e) {
      this.carouselDialog = e;
    },
    secretKeyDialogFun(e) {
      this.secretKeyDialog = e;
    },
  }
};
</script>
<style >
.el-dropdown {
  color: #fff;
}
</style>>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.header-container {
  color: #fff;
  line-height: 59px;
  height: 59px;
  width: 100%;
  padding: 0 20px;
  font-size: 20px;
  background-color: #ffffff;
  .title {
    color: #02020C;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    box-sizing: border-box;
    img {
      height: 22px;
    }
    :first-child {
      margin-right: 10px;
    }
  }
  .home-title {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
  }

  .user-info {
    cursor: pointer;
    height: 100%;
    align-items: center;
    font-size: 13px;
    color: #848484;
    font-weight: bolder;
    text-align: right;

    .newImg {
      vertical-align: middle;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 2%;
    }
    span{
      color: #848484;
    }
  }
}
</style>
